<template>
    <a-modal
      title="签约单位"
      :width="800"
      :visible="visible"
      :confirmLoading="loading"
      @cancel="()=> {$emit('cancel')}">
      <a-spin :spinning="loading">
        <a-form :form="form" v-bind="formLayout" >
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-item
                label="签约单位名称"
                :labelCol="{lg: {span: 7}, sm: {span:7}}"
                :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                <BaseInput
                :disabled="isLook"
                  v-decorator="['name',{rules: [{ required: true, message: '请输入签约单位名称' }]}]"
                  name="name"
                  placeholder="请输入"
                  autocomplete="off" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-item
                label="状态"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
                <a-select placeholder="请选择" :disabled="isLook" v-decorator="['enabledCode',{rules: [{ required: true, message: '请选择状态' }]}]">
                  <a-select-option value="0">不可用</a-select-option>
                  <a-select-option value="1">可用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
      <template slot="footer">
          <a-button @click="()=>$emit('cancel')">关 闭</a-button>
          <a-button v-if="!isLook" @click="()=>$emit('ok')" type="primary">保 存</a-button>
        </template>
    </a-modal>
  </template>
  
  <script>
  import pick from 'lodash.pick'
  
  // 表单字段
  const fields = ['name', 'enabledCode']
  
  export default {
    name:'a'+Date.now(),
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 13 }
        }
      }
      return {
        form: this.$form.createForm(this),
        isLook: false
      }
    },
    created () {
  
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
  
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        if(this.model) {
            this.form.setFieldsValue(pick(this.model, fields))
            this.isLook = this.model.disabled
        }
      })
    },
  }
  </script>
  